<template>
  <div class="container">
    <h3>{{title}}</h3>
    <table border="1">
      <thead>
        <tr>
          <slot></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) of arrKeys" :key="index">
          <td v-for="(v,i) in datas[index]" :key="i">{{v}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrKeys: [], //获取传过来的键名的数组
    }
  },
  props: ['title', 'datas'],
  created() {
    for (let i in this.datas) {
      this.arrKeys.push(Object.keys(this.datas[i]))
    }
  },
  watch: {
    datas() {
      this.arrKeys = []
      for (let i in this.datas) {
        this.arrKeys.push(Object.keys(this.datas[i]))
      }
    },
  },
  computed: {},
  methods: {},
}
</script>

<style scoped>
table {
  margin: auto;
  width: 500px;
}
tr {
  width: 100%;
}
thead {
  width: 100%;
}
</style>
